<template>
    <div class="order-card after-line" @click="onClick">
        <div class="clearfix good-info">

            <!-- 商品 -->
            <template v-if="detailIsArr">
                <div v-for="(item, index) in detail" :key="index" class="good-item">
                    <div class="single-line-left">
                        <div class="cover" :style="{'background-image': 'url(' + item.order_cover + ')'}" ></div>
                    </div>
                    <div class="single-line-center-wrapper info-box overflow">
                        <div class="name large-text hidden-text-v2 line-18">
                            {{item.good_name}}
                        </div>
                        <div class="price normal-text">
                            <span class="fl">
                                ￥{{item.price_text}}
                                <span class="grey-color">&times;{{item.number}}</span>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="clearfix">
                    <div class="fl">订单价格</div>
                    <div class="fr">{{(order.original_price - discountAmount) | currency}}元</div>
                </div>
            </template>

            <!-- 套餐 -->
            <block v-else>
                <div class="single-line-left">
                    <!-- <img class="cover" mode="aspectFill" :src="cover" /> -->
                    <div class="cover" :style="{'background-image': 'url(' + cover + ')'}" ></div>
                </div>
                <div class="single-line-center-wrapper info-box overflow">
                    <div class="name large-text hidden-text-v2 line-18">
                        {{name}}
                    </div>
                    <div class="price normal-text">
                        <span class="fl">
                            ¥ {{(order.original_price - discountAmount) | currency}}
                            <span class="grey-color">&times;1</span>
                        </span>
                        <span class="fr">
                            支付金额：￥{{(!order.is_prepay ? order.price - discountAmount : order.price) | currency}}
                        </span>
                    </div>
                </div>
            </block>
        </div>
        <!-- 最近的物流状态 -->
        <!-- <div class="logistic"> -->
            <!-- 最近的物流状态 -->
        <!-- </div> -->
        <div class="control clearfix">
            <span class="fl logi-status normal-text">{{orderStatusText}}</span>
            <div class="fr">
                <!-- 已经支付完成 && 已经签收 && 显示评价 -->
                <span v-if="status == 'paid' && isComplete && commentVisible" class="btn btn-mobile btn-white btn-normal fourth-border"
                    @click.stop="onClickComment">
                    去评价
                </span>
                <!-- tip: 不再检查isFinish字段，即不检查商户端是否确认 -->
                <!-- <div v-if="status == 'paid' && !isComplete && isFinish && (delivery === 2 || delivery === 0)" -->
                <div v-if="status == 'paid' && !isComplete && (delivery === 2 || delivery === 0) && (!order.is_prepay || order.final_payment)"
                    class="btn btn-mobile btn-red btn-normal transparent-border"
                    @click.stop="onClickComplete">
                    确认收货
                </div>
                <!-- 支付: init 状态下允许支付 -->
                <span v-if="status == 'init'" class="btn btn-mobile btn-red btn-normal transparent-border"
                    @click.stop="onClickPay">
                    支付
                </span>
                <!-- 退换、售后 -->
                <span v-if="status == 'return'" class="btn btn-mobile btn-red btn-normal transparent-border"
                    @click.stop="onClickService">
                    申请售后
                </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
    getOrderStatus1,
} from '@/lib/utils';
import {
    api,
} from '@/lib/api';
import store from '@/store';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'OrderCard',
})
export default class OrderCard extends Vue {
    /** 订单id */
    @Prop({ type: Number }) public orderId?: number;
    /** 套系id */
    @Prop({ type: Number }) public linkId: any;
    /** 订单商品类型 */
    @Prop({ type: String }) public goodType: any;
    @Prop({ type: Number, default: 0 }) public couponPay: any;
    /** 商品详情 */
    @Prop({ type: [ Array, Object ] }) public detail: any;
    /** 是否需要物流 */
    @Prop({ type: Number }) public delivery: any;
    /** 支付单号 */
    @Prop({ type: String }) public payNo: any;
    /** 商品名称 */
    @Prop({ type: String }) public name: any;
    @Prop({ type: String }) public cover: any;
    /** 价格 */
    @Prop({ type: Number }) public price: any;
    /** 原价 */
    @Prop({ type: Number }) public originalPrice: any;
    @Prop({ type: Number, required: true }) public totalPrice: any;
    /** 商品数量 */
    @Prop({ type: Number, required: true }) public count: any;
    /** 评价是否可见 */
    @Prop({ type: Boolean, default: false }) public commentVisible: any;
    /** 订单状态 */
    @Prop({ type: String }) public status: any;
    /** 是否已经签收 */
    @Prop({ type: Boolean }) public isComplete: any;
    /** 是否卖家到货 */
    @Prop({ type: Boolean }) public isFinish: any;
    /** 订单数据 */
    @Prop({ required: true, type: Object }) public order!: Order.ListItem;

    public get detailIsArr() {
        return Array.isArray(this.detail);
    }
    public get discountAmount() {
        return this.order?.discount_amount || 0;
    }

    /** 价格 */
    public get priceCurrency() {
        return this.price ? '￥' + currency(this.price) : '';
    }

    /** 订单状态文本 */
    public get orderStatusText() {
        return getOrderStatus1(this.order);
    }

    /**
     * 点击去评价
     */
    public onClickComment() {
        // api.navigateTo({
        //     url: '/pages/comment/main',
        //     query: {
        //         order_id: this.orderId,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.MALL_COMMENT,
            params: {
                orderId: this.orderId! + '',
            },
        });
    }

    /**
     * 点击支付
     */
    public async onClickPay() {
        store.commit('utils/startRequest');
        const res = await store.dispatch('order/pay', {
            orderId: this.orderId,
        });
        // 触发微信支付
        const params = res.data.data;
        const result = await api.requestPayment({
            ...params,
            timeStamp: params.timestamp,
        }).catch((err: any) => {
            // console.log('err', err);
        });
        if (result) {
            wx.showToast({
                title: '支付成功',
                duration: 2000,
            });
            store.dispatch('user/getBasicInfo', true);
            // 跳转到支付结果
            setTimeout(() => {
                // api.navigateTo({
                //     url: '/pages/order_result/main',
                //     query: {
                //         order_id: this.orderId,
                //     },
                // });

                api.push({
                    name: ROUTE_NAME.ORDER_RESULT,
                    params: {
                        orderId: this.orderId + '',
                    },
                });
            }, 2000);
        }
        store.commit('utils/endRequest');
    }

    /**
     * 确认收货
     */
    public async onClickComplete() {
        store.commit('utils/startRequest');
        const res = await store.dispatch('order/confirm', {
            orderId: this.orderId,
        });
        if (res.statusCode === 200 && res.data.status === 0) {
            await Promise.all([
                store.dispatch('order/getList', {
                    status: 'all',
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('order/getList', {
                    status: 'paid',
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('order/getList', {
                    status: 'need_comment',
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('order/getList', {
                    status: 'evaluate',
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('order/getList', {
                    status: 'return',
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                store.dispatch('order/getList', {
                    status: 'received',
                    offset: 0,
                    count: 10,
                    forceUpdate: true,
                }),
                
            ]);
            wx.showToast({
                title: '确认收货',
                icon: 'success',
            });
        }
        store.commit('utils/endRequest');
    }

// 新增售后按钮
    public onClickService(){
        console.log('售后按钮被点击了')
    }

    public onClick() {
        this.$emit('click');
    }

    /**
     * 金额显示
     */
    public currency(price: any) {
        // console.log('currency', price);
        return currency(price);
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.order-card {
    position: relative;
    .good-info {
        padding: 10px 30rpx 16rpx;
        .cover {
            width: 144rpx;
            height: 144rpx;
            background: center no-repeat;
            background-size: cover;
            border-radius: 7px;
        }
        .info-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            height: 144rpx;
            padding: 10rpx;
        }
    }
    .good-item {
        padding: 5px 0;
    }
    .name,
    .price {
        padding-left: 16rpx;
    }
    .price {
        padding-top: 6rpx;
    }
    .control {
        padding: 10rpx 30rpx 16rpx;
        .logi-status {
            display: inline-block;
            padding-top: 10rpx;
            color: @color-red;
        }
        .btn.btn-mobile {
            min-width: 160rpx;
            padding: @button-normal-padding-v 0;
            margin-right: 8rpx;
            text-align: center;
        }
    }
    .line-18 {
        line-height: 18px;
    }
}

</style>
